import Vue from 'vue'

// 引入App.vue组件
import App from './App.vue'

// 引入router路由
import router from './router'

// 引入elementUI
import './plugins/element.js'

// 引入全局样式
import './assets/css/globle.css'

//! 引入本地阿里图标库
import './assets/fonts/iconfont.css'

//! 引入运行依赖-树形表格(tree-table)
import TreeTable from 'vue-table-with-tree-grid'

//! 引入运行依赖-富文本(quill-editor)
import VueQuillEditor from 'vue-quill-editor'
/**
 *! 引入富文本编辑器的样式
 */
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// TODO: 进行项目优化1，每次axios时顶部会有loading效果-添加运行依赖 nprogress
//! 通过axios的拦截器进行决定什么时候出现loading效果
/**
 * request请求拦截器  展示进度条
 * response响应拦截器  隐藏进度条
 */
//! 导入运行依赖 nprogress（顶部进度条效果）
import NProgress from 'nprogress'
/**
 *! 导入nprogress的样式效果
 */
import 'nprogress/nprogress.css'

// TODO: 进行项目优化2,在bulid阶段（打包项目时，不允许有console，利用开发依赖（babel-plugin-transform-remove-console）在根目录中的babel.config.js文件中进行设置）

/**
 *TODO：进行项目优化3, 通过chainWebpack自定义打包入口，让开发时的入口为main-dev，打包是的入口为main-prod，虽然两者一模一样，但是因为build后代码会有些不同，所以分开好一些
 *! 想要做到两个打包入口，只需要将原来的main.js重命名为main-dev.js,然后再拷贝一份，命名为main-prod.js，然后再  创建vue.config.js文件  并添加代码
 */

/**
 *! (注意！这步优化只针对build打包，因为会根据production判断当前是否在打包，进而设置CDN的依赖项引入，开发阶段不会引入CDN)
 *TODO：进行build打包时项目优化4, 通过externals加载外部CDN资源，防止打包后依赖项体积过大，加载慢,去vue.config.js文件中添加代码
 *! 我们通过import导入的依赖，比如Echarts、quill（富文本）体积很大，而且所有的外部导入都会打包到一起，体积很大，加载慢
 */

// !引入axios
import axios from 'axios'

// ??配置axios请求的根路径  API接口 不设置这个就是每次调用$axios的时候url要写的比较长而已，不影响
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'

// ??挂载原型的属性，让所有组件都能够直接通过this访问$axios  this.$axios
Vue.prototype.$axios = axios

/**
 * ?请求头-->无论是console.log啥，都会有个headers，这个就是请求头
 * !需要授权的API接口，必须在请求头中使用Authorization字段提供token令牌
 *所以我们通过axios的请求拦截器去添加token给Authorization字段，保证拥有权限获取数据
  axios.interceptors.request  ---> axios的请求拦截器(每次使用axios请求时，先进行拦截器的回调函数验证，然后再提交给后端)
  通过.use()来给请求拦截器挂载一个回调函数
 */
// ! axios的请求拦截器
// ? 在request请求拦截器触发时，展示进度条loading效果 也就是调用函数NProgress.start()
axios.interceptors.request.use(config => {
  // config---->请求对象，包含很多东西，其中就有请求头headers
  // console.log(config)
  // ? 展示进度条效果
  NProgress.start()
  // ! 为请求头对象(headers)添加Authorization字段，并将sessionStorage中的token值赋值过去
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // ! 将拦截器预处理后的请求头发送给后端，进行真正的请求，这句必写！
  return config
})

// ? 在response响应拦截器触发时，隐藏进度条效果，也就是调用 NProgress.done()
axios.interceptors.response.use((config) => {
  // ? 隐藏进度条效果
  NProgress.done()
  return config
})

// 全局注册树形表格
// !这样就能用<tree-table></tree-table>来渲染表格了
Vue.component('tree-table', TreeTable)
// 全局注册富文本编辑器
Vue.use(VueQuillEditor)

// !全局注册时间过滤器，用于处理时间格式问题，当显示的时间是毫秒形式，用这个转换成常见的日期形式
// dateFormat是这个时间过滤器的名字,通过这个名字调用过滤器
// originVal 是传入的原始时间
Vue.filter('dateFormat', function (originVal) {
  const dt = new Date(originVal)
  // 年
  const y = dt.getFullYear()
  // dt.getMonth() + 1 就是获取日期+1变成1-12月，
  // ! 通过.padStart(2, '0')，当字符串长度不足两位时，用'0'来填充在首位至2位
  // ! 因为是针对字符串的，所以在dt.getMonth() + 1 + '' 转为字符串
  // 月
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  // 日
  const d = (dt.getDate() + 1 + '').padStart(2, '0')

  // 时
  const hh = (dt.getHours() + 1 + '').padStart(2, '0')
  // 分
  const mm = (dt.getMinutes() + 1 + '').padStart(2, '0')
  // 秒
  const ss = (dt.getSeconds() + 1 + '').padStart(2, '0')

  // 返回过滤后的时间格式  yyyy-mm-dd hh:mm:ss
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
